<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
    <title>商品详情 - 钢域云贸</title>
    <link rel="icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="shortcut icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 50;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            border-radius: 8px;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        .star-rating {
            color: #facc15; /* 星级颜色 */
        }
        .star-rating .fas, .star-rating .far {
            font-size: 16px;
        }
    </style>
</head>
<body class="bg-gray-100">
<!-- 公共头部 -->
<th:block th:replace="~{/header.html}"></th:block>
<!-- 返回按钮 -->
<div class="container mx-auto my-12">
    <button onclick="window.history.back()" class="flex items-center text-gray px-4 py-2 rounded-md mb-4">
        <i class="fas fa-arrow-left mr-2"></i>
    </button>
</div>
<!-- Main Content -->
<main class="container mx-auto my-12">
    <div class="flex flex-col lg:flex-row gap-8">

        <!-- Product Image -->
        <div class="lg:w-1/3">
            <img th:src="${product.imageUrl} ?: '/uploads/placeholder.png'" th:alt="${product.name}" class="w-full h-96 object-cover rounded-lg shadow-md">
        </div>
        <!-- Product Details -->
        <div class="lg:w-2/3">
            <h1 class="text-2xl font-bold text-gray-800" th:text="${product.name}"></h1>
            <p class="text-gray-600 mt-2" th:text="'分类: ' + ${product.categoryName}"></p>
            <p class="text-red-600 font-bold text-2xl mt-2" th:text="'¥' + ${#numbers.formatDecimal(product.price, 1, 2)}"></p>
            <p class="text-gray-700 mt-4" th:text="'规格: ' + ${product.specification}"></p>
            <p class="text-gray-700 mt-2" th:text="'材质: ' + ${product.material}"></p>
            <p class="text-gray-700 mt-2" th:text="'库存: ' + ${product.inventory}"></p>
            <p class="text-gray-700 mt-2" th:text="'发货地址: ' + ${product.shippingAddress} + ', ' + ${product.shippingRegion}"></p>
            <a th:href="${product.materialReportUrl}" target="_blank" class="text-blue-600 hover:underline mt-2 inline-block">查看材质报告</a>

            <!-- 供应商卡片 -->
            <div th:if="${supplierInfo != null}" class="mt-4">
                <div class="bg-white p-4 rounded-lg shadow-md cursor-pointer" onclick="openSupplierModal()">
                    <div class="flex items-center">
                        <img th:src="${supplierInfo.logoUrl} ?: '/uploads/placeholder.png'" alt="供应商Logo" class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <h3 class="text-lg font-semibold" th:text="${supplierInfo.company}"></h3>
                            <p class="text-sm text-gray-600">
                                星级:
                                <span class="star-rating">
                                    <!-- 拆分星级渲染逻辑 -->
                                    <span th:each="i : ${#numbers.sequence(1, 5)}">
                                        <!-- 实心星 -->
                                        <i th:if="${i <= (supplierInfo.fullStars != null ? supplierInfo.fullStars : 0)}" class="fas fa-star"></i>
                                        <!-- 半星 -->
                                        <i th:if="${i == (supplierInfo.fullStars != null ? supplierInfo.fullStars : 0) + 1 and supplierInfo.hasHalfStar != null and supplierInfo.hasHalfStar}" class="fas fa-star-half-alt"></i>
                                        <!-- 空心星 -->
                                        <i th:if="${i > (supplierInfo.fullStars != null ? supplierInfo.fullStars : 0) and (i != (supplierInfo.fullStars != null ? supplierInfo.fullStars : 0) + 1 or supplierInfo.hasHalfStar == null or !supplierInfo.hasHalfStar)}" class="far fa-star"></i>
                                    </span>
                                </span>
                                <!-- 显示评分数值 -->
                                <span th:text="${supplierInfo.averageRating != null ? #numbers.formatDecimal(supplierInfo.averageRating, 1, 1) : '0.0'}"></span></span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 模态框 -->
            <div id="supplierModal" class="modal">
                <div class="modal-content">
                    <span class="close" onclick="closeSupplierModal()">×</span>
                    <div th:if="${supplierInfo != null}">
                        <div class="flex items-center mb-4">
                            <img th:src="${supplierInfo.logoUrl} ?: '/uploads/placeholder.png'" alt="供应商Logo" class="w-16 h-16 rounded-full mr-4">
                            <div>
                                <h2 class="text-xl font-bold" th:text="${supplierInfo.company}"></h2>
                                <div class="star-rating">
                                    <!-- 拆分星级渲染逻辑 -->
                                    <span th:each="i : ${#numbers.sequence(1, 5)}">
                            <!-- 实心星 -->
                            <i th:if="${i <= (supplierInfo.fullStars != null ? supplierInfo.fullStars : 0)}" class="fas fa-star"></i>
                                        <!-- 半星 -->
                            <i th:if="${i == (supplierInfo.fullStars != null ? supplierInfo.fullStars : 0) + 1 and supplierInfo.hasHalfStar != null and supplierInfo.hasHalfStar}" class="fas fa-star-half-alt"></i>
                                        <!-- 空心星 -->
                            <i th:if="${i > (supplierInfo.fullStars != null ? supplierInfo.fullStars : 0) and (i != (supplierInfo.fullStars != null ? supplierInfo.fullStars : 0) + 1 or supplierInfo.hasHalfStar == null or !supplierInfo.hasHalfStar)}" class="far fa-star"></i>
                        </span>
                                    <!-- 显示评分数值 -->
                                    <span th:text="${supplierInfo.averageRating != null ? #numbers.formatDecimal(supplierInfo.averageRating, 1, 1) : '0.0'}"></span>
                                </div>
                            </div>
                        </div>
                        <p class="text-gray-700" th:text="'联系电话: ' + ${supplierInfo.phone}"></p>
                        <p class="text-gray-700" th:text="'地址: ' + ${supplierInfo.address}"></p>
                        <p class="text-gray-700" th:text="'简介: ' + ${supplierInfo.description ?: '暂无简介'}"></p>
                    </div>
                    <div th:if="${supplierInfo == null}">
                        <p class="text-gray-700">供应商信息不可用</p>
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div th:if="${session.user == null or session.user.role != 'BUYER'}" class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mt-6">
                <p>请以买家身份登录后操作！<a th:href="@{/login(url='/buyer/product/' + ${product.id})}" class="text-blue-600 hover:underline">立即登录</a></p>
            </div>
            <div th:unless="${session.user == null or session.user.role != 'BUYER'}" class="mt-6 flex flex-wrap gap-4">
                <form th:action="@{/buyer/cart/add}" method="post" class="flex items-center">
                    <input type="hidden" name="productId" th:value="${product.id}">
                    <input type="number" name="quantity" value="1" min="1" th:max="${product.inventory}" class="border p-2 w-20 rounded-md mr-2">
                    <button type="submit" class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
                        <i class="fas fa-shopping-cart mr-2"></i> 加入购物车
                    </button>
                </form>

                <form th:action="@{/buyer/checkout}" method="post" class="flex items-center">
                    <input type="hidden" name="productId" th:value="${product.id}">
                    <input type="number" name="quantity" id="checkoutQuantity" value="1" min="1" th:max="${product.inventory}" class="border p-2 w-20 rounded-md mr-2">
                    <button type="submit" class="flex items-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition">
                        <i class="fas fa-bolt mr-2"></i> 立即购买
                    </button>
                </form>

                <form th:action="@{/buyer/favorite}" method="post">
                    <input type="hidden" name="productId" th:value="${product.id}">
                    <button type="submit" class="flex items-center px-4 py-2 bg-yellow-500 text-white rounded-md hover:bg-yellow-600 transition">
                        <i class="fas fa-star mr-2"></i> 收藏
                    </button>
                </form>
            </div>

            <div th:if="${session.user == null or session.user.role != 'BUYER'}" class="mt-6">
                <p class="text-gray-700">预览模式，仅显示商品详情</p>
            </div>
        </div>
    </div>
</main>

<!-- 公共底部 -->
<th:block th:replace="~{/footer.html}"></th:block>

<script src="/js/jquery-latest.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script>
    function openSupplierModal() {
        document.getElementById('supplierModal').style.display = 'block';
    }

    function closeSupplierModal() {
        document.getElementById('supplierModal').style.display = 'none';
    }
    // 点击模态框外部关闭
    window.onclick = function(event) {
        var modal = document.getElementById('supplierModal');
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    }
</script>
</body>
</html>